<script setup>
import { ref, reactive } from "vue";

const items = ref([
  { message: "Foo", id: 30 },
  { message: "Bar", id: 2 },
]);

const myObject = reactive({
  title: "How to do lists in Vue",
  author: "Jane Doe",
  publishedAt: "2016-04-10",
});
</script>

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.message + " " + item.id }}
      </li>
    </ul>
  </div>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="item.id">
        {{ index }} - {{ item.message }}
      </li>
    </ul>
  </div>
  <ul>
    <li v-for="(value, key, index) in myObject" :key="value">
      {{ index }}. {{ key }}: {{ value }}
    </li>
  </ul>
  <div>
    <span v-for="n in 10" :key="n">{{ n }},</span>
  </div>
  <div v-for="item in items" :key="item.id">
    {{ item.id }} - {{ item.message }}
  </div>
  <button @click="items.unshift({ message: 'xxx', id: 10 })">Add an item</button>
</template>